<template>
  <div class="questionnaire-survey-mian base-main bgcFFF" v-wechat-title="pageTitle">
    <div class="topic-box">
      <p class="topic-title color333 fs20">
        {{index}}/{{questionArr.length}}：{{showQuestionArr.title}}
        <span class="color7E82F6 fs14">{{showQuestionArr.type == 0 ? '〔多选题〕' : '〔单选题〕'}}</span>
      </p>
      <p class="time fs13 color999">2020.07.12-2020.08.12</p>

      <div class="options-box">
        <van-checkbox-group
          v-if="showQuestionArr.type == 0"
          v-model="result">
          <van-checkbox
            v-for="(item, index) in showQuestionArr.options"
            :key="item.id"
            :name="item.id"
            ref="checkboxes"
            @click.stop="handleCheckbox(index)"
          >
            复选框 {{ item.txt }}
          </van-checkbox>
        </van-checkbox-group>

        <van-radio-group
          v-else
          v-model="radio">
          <van-radio
            v-for="(item, index) in showQuestionArr.options"
            :key="item.id"
            :name="item.id"
            >{{item.txt}}</van-radio>
        </van-radio-group>
      </div>
    </div>


    <div class="btn-box w100 pdlr15">
      <span v-if="!isOver" class="base-btn" @click="handleNext">下一题</span>
      <span v-else class="base-btn" @click="handleSub">提交</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        pageTitle: '调研答卷',
        index: 1, // 第几题
        questionArr:[
          {
            title: '加班狗来答题啦，请问1+1等于多少？',
            type: 0,
            options: [
              {
                id: 1,
                txt: '选项1选项1选项1选项1选项1选项1选项1选项1',
              },
              {
                id: 2,
                txt: '选项2选项2选项2选项2',
              },
              {
                id: 3,
                txt: '选项33333',
              }
            ]
          },
          {
            title: '问题二',
            type: 1,
            options: [
              {
                id: 1,
                txt: '选项1选项1选项1选项1选项1选项1选项1选项1',
              },
              {
                id: 2,
                txt: '选项2选项2选项2选项2',
              },
              {
                id: 3,
                txt: '选项33333',
              }
            ]
          },
          {
            title: '问题3',
            type: 1,
            options: [
              {
                id: 1,
                txt: '选项1选项1选项1选项1选项1选项1选项1选项1',
              },
              {
                id: 2,
                txt: '选项2选项2选项2选项2',
              },
              {
                id: 3,
                txt: '选项33333',
              }
            ]
          },
          {
            title: '问题4',
            type: 1,
            options: [
              {
                id: 1,
                txt: '选项1选项1选项1选项1选项1选项1选项1选项1',
              },
              {
                id: 2,
                txt: '选项2选项2选项2选项2',
              },
              {
                id: 3,
                txt: '选项33333',
              }
            ]
          },
          {
            title: '问题5',
            type: 1,
            options: [
              {
                id: 1,
                txt: '选项1选项1选项1选项1选项1选项1选项1选项1',
              },
              {
                id: 2,
                txt: '选项2选项2选项2选项2',
              },
              {
                id: 3,
                txt: '选项33333',
              }
            ]
          },
        ],
        list: ['a', 'b', 'c'],
        result: [], // 多选题选择
        radio: '', // 单选题选择
        showQuestionArr: [],
        optionsResult: [],
        isOver: false, // 是否答完所有题目
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.showQuestionArr = this.questionArr[this.index-1]
      },
      handleCheckbox(index){
        this.$refs.checkboxes[index].toggle();
      },
      // 下一题
      handleNext() {
        // 先++
        this.index++
        if(this.result.length <= 0 && this.radio == '') {// 没有答题,不能前往下一题
          this.$toast('请选择选项后再按下一题')
          this.index--
          return false
        } else if(this.index <= this.questionArr.length) { // 下一题
          // 判断是否最后一题
          this.isOver = this.index == this.questionArr.length ? true : false
          this.saveResult()
          // 先++ 再重置显示的题目
          this.showQuestionArr = this.questionArr[this.index-1]
          this.result = []
          this.radio = ''
        }
      },
      // 提交
      handleSub() {
        this.saveResult()
        console.log('提交-- ',this.optionsResult);
        this.$dialog.alert({
          title: '谢谢配合',
          message: `感谢您的参与，获得10积分 \n 请到“个人中心”-“我的积分”查看`
        }).then(() => {
          // on close
        });
      },
      saveResult() {
        if(this.result.length <= 0) {
          // 保留单选题答案
          this.optionsResult.push({
            index: this.index,
            result: this.radio
          })
        } else {
          // 保留多选题答案
          this.optionsResult.push({
            index: this.index,
            result: this.result
          })
        }
      },
    },
  }
</script>

<style lang="scss">
 @import "../../assets/css/questionnaireSurvey.scss";
</style>
